{% extends "templates/base.html" %}
{% block title %}详情{% endblock %}
{% block content %}
        {% load static %}
<link rel="stylesheet" href={% static 'layui/css/layui.css' %}>
<script src={% static 'js/jquery.min.js' %}> </script>
<script src="{% static 'layui/layui.js' %}"></script>
<style>
   *{
        margin:0;
        padding:0;
        list-style: none;
    }
	.content{
		padding-top: 30px;
        {#height: 1000px;#}
/*        background-color: pink;*/

        background-size: 100%;
      /*  opacity: 0.5;*/
     }
     .content .zuo{
     	width: 400px;
     	height: 380px;
         padding-left: 100px;
/*     	background-color: blue;*/
     }
     .content .dt{
     	width: 400px;
     	height: 380px;
        padding-left: 100px;
     }
     .dt img{
     	width: 100%;
     	height: 85%;

     }
     .content .you{
     	width: 700px;
     	height: 520px;
/*     	background-color: #333;*/
     	margin-left:755px;
     	margin-top: -385px;
     }
     .you .xianjia{
     	width: 700px;
     	height: 50px;
     	margin-top: 60px;
     }
     .xianjia span{
     	color: red;
     }
     .xianjia .sz{
     	font-size: 30px;
     }
     .you .peisong{
     	width: 700px;
     	height: 50px;
     	margin-top: 10px;
     }
     .you .fenlei{
     	width: 50%;
     	height: 50px;
     	margin-top: 10px;
     }
     .you .chicun{
     	width: 50%;
     	height: 50px;
     	margin-top: 10px;
     }

     .content ul{
     	width: 600px;
     	height: 100px;
     	margin-left: 80px;
     	margin-top: -25px;
     }
     .content li{
     	width: 100px;
     	height:30px;
     	float: left;
     	text-align: center;
        list-style: none;
     }
     .content li:hover{
     	{#background-color: #777;#}
         transform:scale(1.3);
     }
     .level {
         width: 50%;
     	height: 50px;
     	margin-top: -35px;
         padding-left: 35%;

     }
   .charge {
         width: 50%;
     	height: 80px;
     	margin-top: -50px;
         padding-left: 35%;

     }
   .office {
       width: 80%;
       height: 450px;
       background-color: #E9ECEA;
       margin-left: 10%;
       border-top:2px #b2b2b2 solid ;
   }
   .kobei {
       width: 80%;
       height: 700px;
       background-color: #E9ECEA;
       margin-left: 10%;
       border-top:2px #b2b2b2 solid ;
   }
  #color-options li {
    display: inline-block;
    margin-right: 10px;
    cursor: pointer;
  }


  .color-option:checked + label {
    background-color: #777; /* 可根据需要自定义选中颜色时的背景色 */
    color: black; /* 可根据需要自定义选中颜色时的文字颜色 */
  }

    #size-options li {
    display: inline-block;
    margin-right: 10px;
    cursor: pointer;
  }


  .size-option:checked + label {
    background-color: #bcd0c7; /* 可根据需要自定义选中颜色时的背景色 */
    color: black; /* 可根据需要自定义选中颜色时的文字颜色 */
  }
  .yuyue{
      height: 50px;
      width: 200px;
      color: #373b3e;
      background-color: #bcd0c7;
      border-radius: 20px 20px 20px 20px;
      border: 1px solid #000;
      margin-left: 11px;
      display: flex;
      float: left;
      text-align: center;
      justify-content: center; /* 水平居中 */
      align-items: center; /* 垂直居中 */
  }

  /* 模态框的基本样式 */
.modal {
  display: none; /* 默认隐藏 */
  position: fixed; /* 固定定位 */
  top: 30%; /* 距离屏幕顶部20% */
  left: 53%; /* 水平居中（通过transform偏移）*/
  transform: translateX(-50%); /* 向左偏移自身宽度的50%，实现水平居中 */
  width: 250px; /* 宽度 */
  height: 140px; /* 高度 */
  background-color: rgba(241, 241, 241, 0.9); /* 黑色背景，80%透明度 */
  border-radius: 10px; /* 圆角 */
  z-index: 1000; /* 确保模态框位于顶层 */
  overflow: auto; /* 如果内容过多，允许滚动 */
  padding: 20px; /* 内边距 */
  box-sizing: border-box; /* 包括内边距和边框在宽度和高度内 */
}
.my_model {
    display: none; /* 初始隐藏 */
    position: fixed; /* 固定定位 */
    top: 50%; /* 顶部偏移50% */
    left: 50%; /* 左侧偏移50% */
    transform: translate(-50%, -50%); /* 向上和向左移动自身宽高的50%，以达到居中 */
    width: 300px; /* 宽度 */
    height: 320px; /* 高度 */
    background-color: white; /* 背景颜色 */
    border: 1px solid #ccc; /* 边框 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    z-index: 1000; /* 确保在顶层显示 */
    padding: 20px; /* 内边距 */
    text-align: center; /* 文本居中 */
    box-sizing: border-box; /* 边框盒模型 */
}
/* 模态框内容的样式（如果需要的话） */


/* 关闭按钮的样式 */
.close {
  float: right; /* 浮动到右侧 */
  font-size: 28px; /* 字体大小 */
  font-weight: bold; /* 字体加粗 */
  color: #f1f1f1; /* 字体颜色 */
  cursor: pointer; /* 鼠标悬停时显示指针 */
  /* 如果需要，可以添加一些内边距或外边距来调整位置 */
}

/* 当鼠标悬停在关闭按钮上时改变颜色 */
.close:hover,
.close:focus {
  color: #bbb; /* 悬停或聚焦时的颜色 */
  text-decoration: none; /* 去除下划线 */
  cursor: pointer; /* 指针样式 */
}

/* 确认链接的样式（如果需要的话） */
.confirm-login {
  display: block; /* 使其独占一行 */
  text-align: center; /* 文本居中 */
  margin-top: 10px; /* 上边距 */
  color: #fff; /* 文本颜色 */
  text-decoration: none; /* 去除下划线 */
  /* 其他样式，如字体大小、背景色等，可以根据需要添加 */
}

   .all {
       width: 90%;
       height: 620px;
       background-color: #E9ECEA;
       margin-left: 5%;
   }

   .author {
       width: 60px;
       height: 60px;
       border-radius: 50%;
   }

   .author img {
       border-radius: 50%; /* 设置边框半径为50%，使图片和边框一起变圆 */
       overflow: hidden; /* 防止图片原始尺寸大于容器时溢出 */
       width: 100%; /* 设置图片的宽度（或高度，取决于你想要的效果） */
       height: 100%; /* 设置图片的高度，与宽度相同以形成圆形 */
       object-fit: cover; /* 确保图片覆盖整个容器，同时保持其宽高比（如果需要的话） */
   }



</style>
  <div class="content">
   	    <div class="zuo">

           <div class="dt">
        {% for car in car_list %}
                   <h1 style="font-size: 40px;text-align: center;margin-bottom: 30px;"><img src="/{{ model.logo }}" style="width: 70px;margin-left: -70px;margin-right: 20px">{{ car.cname }}</h1>
          <img src="/{{ car.durl }}">

           </div>
   	    </div>

   <form class="you">
   <h2 style="font-size: 40px"><img src="/static/4s.jpg" style="width: 40px;height: 40px"> 新能源4s专卖店</h2>
   <p style="padding-left: 60px">地址:广东省广州市黄埔区源祥路96号</p>
   	<div class="xianjia"><span>报价：<span class="sz">￥{{ car.price}}</span></span></div>

          {% for detail in detail_list %}
   	<div class="peisong"> 首付￥：{{ detail.payment }}</div>
   	<div class="fenlei">厂商：{{ detail.firm }}</div>
   <div class="level">级别：{{ detail.rank }}</div>
   	<div class="chicun">续航里程：{{ detail.endurance }}</div>
       <div class="charge">快充：{{ detail.charge }}</div>
          {% endfor %}
   {% if suser != none %}
      <a href="javascript:;" id="zhixun">
          <div class="yuyue" type="submit" >立即咨询</div>
      </a>
       <a href="javascript:;" id="buy" carid="{{ car_id }}">
           <div class="yuyue" type="submit">立即预约</div>
       </a>
   {% else %}
       <a href="javascript:;" id="buyNow" >
          <div class="yuyue" type="submit" >立即咨询</div>
      </a>
       <a href="javascript:;" id="yuyueNow" >
           <div class="yuyue" type="submit">立即预约</div>
       </a>
   {% endif %}

   </form>
<div id="loginModal" class="modal">
  <div class="modal-content">
    <span class="close" style="color: #75b798">&times;</span>
    <p style="font-size: 15px;color: black">温馨提示：</p>
      <p style="font-size: 15px;color: black;padding-top: 10px">您还是没有登入，是否立即前往登入注册！</p>
    <a href="/login/" class="confirm-login" style="color: #75b798;width: 50%">确认</a>
    <a href="javascript:;" class="close" style="width:40%;color: #75b798;font-size: 14px"><p style="margin-top:-19px">取消</p></a>
  </div>
</div>


   <section class="my_model" style="display: none;">
            <a href="javascript:;" class="dialog-close" style="margin-left: 215px;font-size:15px">x</a>
            <img src="/static/userhead/zixun.jpg" style="width: 250px;height: 250px;margin-top: 10px">
           <p>联系电话：12846783436</p>
    </section>



<div id="message-container" style="display:none; position:absolute; top:30%; right:40%; padding:10px; background-color:#75b798; border:1px solid black;"></div>

   </div>

   <div class="office">
   <h2 style="margin: 20px;font-size:30px;border-left:15px blueviolet solid ">实拍图片</h2>
    <li class="one" style="width:35%;height: 300px;margin: 20px;margin-right:10px;float: left">
        <img src="/{{ car.durl }}" style="width: 100%;height: 100%">
    </li>
        {% endfor %}

       {% for img in img_list %}
    <li class="" style="width:20%;height: 140px;margin-left: 8px;margin-top: 20px;float: left">
        <img src="/{{ img.img }}" style="width: 100%;height: 100%">
    </li>
       {% endfor %}


   </div>
    <div class="kobei">
    <h1 style="margin: 20px;font-size:30px;border-left:15px blueviolet solid ">车主口碑</h1>

    <ul class="all" style="overflow-y: auto">
    {% for elavent in elavent_list %}
        <div class="essay-card" style="background-color: #f6f6f6;margin-bottom: 20px">
            <div class="essay-info" style="margin-bottom:20px ">
                <div class="author"><img src="/{{ elavent.head }}"></div>
                <p style=" margin-left: 110px;margin-top: -50px;margin-bottom: 10px;font-size: 20px;">{{ elavent.ename }}</p>
                <p class="publish-time" style=" margin-left: 80px;font-size: 12px;">{{ elavent.updated_at }}</p></div>
            <p class="essay-content" style="padding: 10px">{{ elavent.evaluate }}</p>
        </div>
    {% endfor %}
        </ul>

    </div>

{% endblock %}
{% block script %}
<script>

    $(document).ready(function() {
        $("#buy").click(function () {
            var carid = $(this).attr('carid');
                $.ajax({
                    url:'/reservation/add_reservation/' + carid +'/',
                    typy:'GET',
                    success:function (response){
                        // 假设response.message是你要显示的消息
                        $('#message-container').text(response.message).show(); // 显示消息并设置文本

                        // 如果你想在一段时间后自动隐藏消息，可以添加以下代码
                        setTimeout(function () {
                            $('#message-container').hide(); // 隐藏消息容器
                            location.reload();
                        }, 2000); // 3秒后隐藏
                    },
                    error: function (xhr, status, error) {
                        // 处理错误情况
                        $('#message-container').text('发生错误: ' + error).show();
                        setTimeout(function () {
                            $('#message-container').hide();
                        }, 3000);
                    }
                })
        })

        $("#zhixun").click(function (){
            $('.my_model').show();
                            // 为模态框的关闭按钮添加点击事件监听器
                $('.dialog-close').click(function (e) {
                    e.preventDefault();
                    $('.my_model').hide(); // 隐藏模态框
                });
            // 为模态框的关闭按钮添加点击事件监听器
        })

    })



    $(document).ready(function () {
        // 点击购买按钮时显示模态框
        $("#buyNow").click(function () {
            $("#loginModal").css("display", "block");
        });

        // 点击关闭按钮或模态框外部时关闭模态框
        $(".close, #loginModal").click(function () {
            if ($(this).attr("id") != "loginModal") {
                // 防止点击模态框本身时关闭它
                return;
            }
            $("#loginModal").css("display", "none");
        });

        // 点击“确认”链接时跳转到登录页面
        $(".confirm-login").click(function (e) {
            e.preventDefault(); // 阻止链接的默认行为
            window.location.href = $(this).attr("href"); // 使用链接的href属性进行跳转
        });
    });

    $(document).ready(function () {
        // 点击购买按钮时显示模态框
        $("#yuyueNow").click(function () {
            $("#loginModal").css("display", "block");
        });

        // 点击关闭按钮或模态框外部时关闭模态框
        $(".close, #loginModal").click(function () {
            if ($(this).attr("id") != "loginModal") {
                // 防止点击模态框本身时关闭它
                return;
            }
            $("#loginModal").css("display", "none");
        });

        // 点击“确认”链接时跳转到登录页面
        $(".confirm-login").click(function (e) {
            e.preventDefault(); // 阻止链接的默认行为
            window.location.href = $(this).attr("href"); // 使用链接的href属性进行跳转
        });
    });
</script>
{% endblock %}